<template>
  <ele-toolbar theme="none">
    <div style="display: flex">
      <!--      <div>directorys.length=={{directorys.length}}</div>-->
      <!-- isCommon // 是否公共文件夹  0否，1是-->

      <!--成片/采集配置——用独立菜单了，故而隐藏按钮-->
     <!-- <el-button
        v-if="directorys.length==0 && type==1"
        size="small"
        class="ele-btn"
        type="primary"
        @click="piecesSet(1)"
      >
        成片配置
      </el-button>

      <el-button
        v-if="directorys.length==0 && type==2"
        size="small"
        class="ele-btn"
        type="primary"
        @click="piecesSet(2)"
      >
        采集配置
      </el-button>-->

      <!-- parentId 代表是根目录 -->
      <!-- v-if="parentId==0"-->
      <!-- directorys.length<=1 则是文件夹 -->
<!--      directorys.length==1 ? directorys[0].isCommon!=1 : directorys.length<1-->
      <el-button
        v-if="directorys.length<1"
        size="small"
        type="primary"
        class="ele-btn"
        @click="openFolderAdd"
      >
        创建文件夹
      </el-button>

      <el-button
        v-if="directorys.length==0 && type==2"
        :disabled="!checked.length || checked.length>1"
        size="small"
        class="ele-btn"
        type="primary"
        @click="moveClick"
      >
        素材搬家
      </el-button>
      <el-button
        size="small"
        type="danger"
        style="margin-left: 10px"
        class="ele-btn hidden-xs-only"
        :disabled="!checked.length"
        @click="removeBatch"
      >
        {{directorys.length>=1 ? '删除视频' : '删除文件夹'}}
      </el-button>
    </div>

    <!--<template v-slot:action>
      &lt;!&ndash; 文件夹搜索框 &ndash;&gt;
      <div
        :class="['ele-file-tool-search', { 'hidden-xs-only': styleResponsive }]"
      >
        <el-input size="small" v-model="search" placeholder="搜索您的文件" @change="changeInput">
          <template v-slot:append>
            <el-button icon="el-icon-search" />
          </template>
        </el-input>
      </div>
      &lt;!&ndash; 显示方式切换 &ndash;&gt;
      <i
        v-if="grid"
        class="ele-file-tool-btn el-icon-_menu"
        @click="toggleShowType"
      ></i>
      <i
        v-else
        class="ele-file-tool-btn el-icon-_nav"
        @click="toggleShowType"
      ></i>
    </template>-->
    <!--成片配置 弹窗-->
    <configuration
      :data="data"
      :mcList="mcList"
      :musics="musics"
      ref="pieceSet"
      @click="piecesSet"
      :visible.sync="drawer"
      @done="onDone"
    />

    <!-- 新建文件夹弹窗 -->
    <folder-add
      ref="folderAdd"
      :directorys="directorys"
      :visible.sync="folderAddVisible"
      :parent-id="parentId"
      @done="onDone"
    />

    <!--素材搬家-->
    <moving-materials  ref="moving"></moving-materials>
  </ele-toolbar>
</template>

<script>
  import configuration from '../../collectMaterials/components/btn-configuration'
  import FolderAdd from './folder-add.vue';
  import {deleteFolder,deleteCamerVideo} from '@/api/lncomingManagement/fileList';
  import moveFile from './move-file.vue';
  import MovingMaterials from "../../collectMaterials/components/moving-materials";

  export default {
    components: {MovingMaterials, FolderAdd,moveFile,configuration },
    props: {
      mcList: Array,  // 音乐类型list
      musics: Array,  // 音乐列表list
      // 文件列表数据
      data: Array,
      // 文件夹数据
      directorys: Array,
      // 是否网格展示
      grid: Boolean,
      // 选中数据
      checked: Array,
      // 父级 id
      parentId: Number,
      typeId: Number,
      type: Number  // 1：自动成片页面  2：采集素材页面

    },
    data() {
      return {
        drawer:false,
        fileList: [],
        //上传类型
        accept:'',
        // 搜索关键字
        search: '',
        // 新建文件夹弹窗是否打开
        folderAddVisible: false,
        // 上传文件弹窗是否打开
        folderUpload:false,
        // 上传台本弹窗是否打开
        folderText:false,
        filename:'',

        // 移动文件
        moveVisible:false,
        moveData: null,
        moveFileAll: [],
        moveName:''
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    created() {

    },
    methods: {
      // 成片配置  hideType_ 1:自动成片 2:采集素材
      piecesSet(hideType){
          this.drawer=true
        this.$nextTick(()=>{
          this.$refs['pieceSet'].show(hideType)
        })
        console.log(" this.drawer", this.drawer,'data',this.data,'hideType---',hideType)
      },
      /* 打开新建文件夹弹窗 */
      openFolderAdd() {
        this.folderAddVisible = true;
        console.log("directorys============",this.directorys)
        this.$nextTick(()=>{
          // type: Number  // 1：自动成片页面  2：采集素材页面
          this.$refs['folderAdd'].show(this.type)
        })
      },
      //搜索文件 回车，或失去焦点
      changeInput(e){
        console.log("搜索文件 回车，或失去焦点e",e,'this.search',this.search)
        this.$emit('search', this.search);
        this.$emit('done');

      },
      /* 批量删除 */
      removeBatch() {
        console.log("删除成功1111this.directorys",this.directorys)
        this.$confirm('确定要删除选中的文件吗?', '提示', {
          type: 'warning'
        })
          .then(() => {
            const loading = this.$messageLoading('请求中..');
            //batchDeleteFile 用改          /*1:视频 2:音频 3:台本 4:图片*/
            /*if(this.directorys.length >1 && this.typeId==1 || this.directorys.length >1 && this.typeId==2 || this.directorys.length >1 && this.typeId==4
              || this.directorys.length==1 && this.typeId==1 && this.directorys[0].isCommon ==1
              || this.directorys.length==1 && this.typeId==2 && this.directorys[0].isCommon ==1
              || this.directorys.length==1 && this.typeId==4 && this.directorys[0].isCommon ==1
            ){
              let mpList=[];
              // this.checked. 为选中的所有数据
              this.checked.filter((item, i) => {
                mpList.push(item)
              });
              batchDeleteFile({
                ids:mpList.map((d) => d.id)
              })
                .then((msg) => {
                  loading.close();
                  this.$message.success(msg);
                  this.onDone();
                })
                .catch((e) => {
                  loading.close();
                  this.$message.error(e.msg);
                });
            }*/
            const delApi = this.directorys.length>=1 ? deleteCamerVideo : deleteFolder
            delApi({
                ids:this.checked.map((d) => d.id)
              })
                .then((data) => {
                  console.log("data",data)
                  loading.close();
                  this.$message.success('删除成功！');
                  this.onDone();
                })
                .catch((e) => {
                  loading.close();
                  this.$message.error(e);
                });
          })
          .catch(() => {
            console.log("删除失败")
          });
      },
      /* 单个/批量移动 */
      moveClick(item){
        console.log("item======", item,'checked',this.checked)
        this.$nextTick(()=>{
          this.$refs['moving'].show(this.checked[0].id)
        })

        return

        // checked 代表已选择数据
        // 移动/剪切 文件
        this.moveVisible = true;
        /*
        this.directorys[this.directorys.length - 2]  获取前2个文件夹的内容，-1代表获取上一个文件夹的内容：
        (.name):文件夹名称 （.type)文件夹类型
        */
        this.userFile(this.directorys[this.directorys.length - 2]?.id,item.id)
        this.moveName=this.directorys[this.directorys.length - 2].name;
        this.moveData = this.checked.map((d) => d.id);
        console.log('this.moveData',this.moveData)
        console.log("this.checked===============", this.checked)
      },
      // 查询出可移动的子文件夹
      userFile(parentId,id){
        //用户所创建的文件
        listUserFiles({
          name:this.search,
          // 是否公共文件夹  0否，1是
          isCommon:'',
          //查公共文件根目录不需要传，子级需要
          username: this.$store.state.user.info.username,
          //父级目录：初次传0
          parentId: parentId
        })
          .then((data) => {
            /* type 1:视频 2:音频 3:台本 4:图片*/
            this.moveFileAll = data.filter((x)=>{
              return x.type == this.directorys[this.directorys.length - 1].type
            })
            console.log('this.moveFileAll', this.moveFileAll)
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      /* 完成刷新列表数据 */
      onDone() {
        this.$emit('done');
      },
      /* 显示方式切换 */
      toggleShowType() {
        this.$emit('update:grid', !this.grid);
      }
    }
  };
</script>

<style lang="scss" scoped>
  /* 图标按钮 */
  .ele-file-tool-btn {
    cursor: pointer;
    font-size: 22px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
  }

  /* 搜索框 */
  .ele-file-tool-search {
    display: inline-block;
    vertical-align: middle;
    background-color: hsla(0, 0%, 60%, 0.15);
    border-radius: 32px;

    :deep(.el-input-group__append),
    :deep(.el-input__inner) {
      background-color: transparent;
      border: none;
    }

    :deep(.el-input-group__append) {
      padding: 0;
    }

    :deep(.el-input-group__append .el-button) {
      margin: 0;
      padding: 7px 16px 7px 10px;
      border: none;
    }

    :deep(.el-input-group__append .el-button > i) {
      font-size: 16px;
      font-weight: 600;
    }

    :deep(.el-input__inner) {
      width: 200px;
      padding-right: 0;
      box-sizing: border-box;
    }
  }
  .ele-btn{
    width: 100px;
  }
</style>
